<script setup lang="ts">
  import useCheckFlowNodeListService from '@/services/pages/base-info/useCheckFlowNodeListService'
  import { ElMessageBox } from 'element-plus'
  import { deleteCheckFlowNodeById } from '@/api/basic'
  import { HMessage, HMessageBox } from '@/components/common/message'
  import FormModal from './form-modal.vue'
  import { ref } from 'vue'

  const { checkFlowNodeList, getCheckFlowNodeListLoading, getCheckFlowNodeList } =
    useCheckFlowNodeListService()

  defineOptions({
    name: 'CheckFlowNodeList',
  })

  const formModalVisible = ref(false)
  const currentOperateNodeId = ref('')

  const handleDeleteClick = (node: BaseInfoAPIResponse.CheckFlowNodeListItem) => {
    ElMessageBox({
      title: '提示',
      message: '确定删除该节点？',
      type: 'warning',
      showCancelButton: true,
      autofocus: false,
      async beforeClose(action, instance, done) {
        if (action === 'confirm') {
          try {
            instance.cancelButtonLoading = true
            instance.confirmButtonLoading = true
            const res = await deleteCheckFlowNodeById(node.id)
            instance.cancelButtonLoading = false
            instance.confirmButtonLoading = false
            if (res.data.code === 20000) {
              HMessage.success('操作成功')
              getList()
              done()
              return
            }

            HMessageBox.error(res.data.message)
          } catch (e) {
            instance.cancelButtonLoading = false
            instance.confirmButtonLoading = false
            HMessageBox.error('删除失败，请稍后重试')
          }
          return
        }

        done()
      },
    })
  }

  const handleEditClick = (node: BaseInfoAPIResponse.CheckFlowNodeListItem) => {
    currentOperateNodeId.value = node.id.toString()
    formModalVisible.value = true
  }

  const getList = () => {
    getCheckFlowNodeList()
  }

  defineExpose({
    getList,
  })
</script>

<template>
  <div v-loading="getCheckFlowNodeListLoading" class="check-flow-node-list">
    <div class="header">
      <div class="btn-group">
        <h-plain-button @click="formModalVisible = true">添加节点</h-plain-button>
      </div>
      <div class="search"></div>
    </div>
    <div class="table">
      <el-table :border="true" :stripe="true" :data="checkFlowNodeList">
        <!-- 序号 -->
        <el-table-column type="index" fixed="left" :align="'center'" width="50" label="序号" />

        <!-- 节点名称 -->
        <el-table-column label="节点名称" prop="nodeName" min-width="160" />

        <!-- 创建时间 -->
        <el-table-column label="创建时间" prop="gmtCreate" width="160" />

        <!-- 更新时间 -->
        <el-table-column label="更新时间" prop="gmtUpdate" width="160" />

        <!-- 操作 -->
        <el-table-column label="操作" width="100">
          <template #default="{ row }">
            <h-space>
              <h-link type="error" @click="handleDeleteClick(row)">删除</h-link>
              <h-link @click="handleEditClick(row)">编辑</h-link>
            </h-space>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <form-modal
      v-model="formModalVisible"
      :node-id="currentOperateNodeId"
      @update="getList"
      @close="currentOperateNodeId = ''"
    />
  </div>
</template>

<style scoped lang="scss">
  .check-flow-node-list {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    row-gap: 4px;

    .header {
      display: flex;
      justify-content: space-between;
    }

    .table {
      max-height: calc(100% - 32px);
    }
  }
</style>
